<template>
	<div>
		<p>clicked: {{ $store.state.count }} times, count is yyy</p>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementIfOdd">increment if odd</button>
		<button @click="incrementAsync">increment async</button>
	</div>
</template>

<script>
/*
  1. 读取vuex数据
    this.$store.state.xxx
  2. 更新vuex数据
    this.$store.dispatch("xxx");
*/
export default {
	name: "App",
	mounted() {
		// dispatch commit getters state
		// console.log(this.$store);
	},
	methods: {
		increment() {
			// 触发vuex的action函数 --> action函数调用时会调用commit方法 --> 触发mutation函数
			// --> 直接更新state数据 --> 数据是响应式的，用户界面自动更新
			this.$store.dispatch("increment");
		},
		decrement() {
			this.$store.dispatch("decrement");
		},
		incrementIfOdd() {
			this.$store.dispatch("incrementIfOdd");
		},
		incrementAsync() {
			this.$store.dispatch("incrementAsync");
		},
	},
};
</script>

<style></style>
